<template>
   <a href="/me.html"><span class="logonImg"><img src="img/left.jpg"></span></a>
    <div class="Mid">
      <ul>
        <li><span>头像</span><img class="touImg" src="img/touxiang.jpg"><img src="img/jiantou.png"></li>
        <li><a href="/dataName.html"><span>姓名</span><span>忘记了</span><img src="img/jiantou.png"></a></li>
        <li><span>会员标志</span><img class="img" src="img/zuan.png"></li>
        <li><a href="/dataPhome.html"><span>联系方式</span><span>136****8888</span><img src="img/jiantou.png"></a></li>
        <li><a href="/dataPass.html"><span>修改登陆密码</span><img src="img/jiantou.png"></a></li>
        <li><a href="/dataPay.html"><span>修改钱包密码</span><img src="img/jiantou.png"></a></li>
      </ul>
    </div>
</template>

<script>
export default {
  methods:{

  }
}
</script>
<style scoped>
     .logonImg{
     display: inline-block;
    position: fixed;
    top: 1.5%;
    width: 5%;
    left: 2%;
    z-index:1888;
   
  }
   .logonImg img{
    width:100%;
  }
  a{
    color: #838383;
  }
  /*中部*/
  .Mid{
    width: 100%;
    border: 1px solid #dbdbdb;
    background-color: white;
    color: #838383;
    font-size: .16rem
  }
  .Mid ul{
     width: 90%;
    margin: auto;
  }
  .Mid ul li{
    padding: 4% 0;
    border-top: 1px solid #dbdbdb;
  }
  .Mid ul li:nth-child(1){
    border: none;
    padding: 10% 0;
  }
  .Mid ul li .touImg{
    width: 65px;
    height: 65px;
    border-radius:50%; 
    top: 8.5%;
    right:7%;
  }
   .Mid ul li span:nth-child(2){
     position: absolute; 
      right: 10%
  }
  .Mid ul li img{
    width: 3%;
    margin:0 5%;
    position: absolute; 
    right: 1%
  }
  .Mid .img{
    width:8%;
  }
</style>
